<template>
  <div class="left-panel">
    <div class="panel-box">
      <dv-border-box-13 class="monitor-section">
        <soil-monitor />
      </dv-border-box-13>
      <dv-border-box-13>
        <environment-monitor />
      </dv-border-box-13>
      <dv-border-box-13>
        <temperature-chart />
      </dv-border-box-13>
    </div>
  </div>
</template>

<script setup>
import SoilMonitor from './LeftComponets/SoilMonitor.vue'
import EnvironmentMonitor from './LeftComponets/EnvironmentMonitor.vue'
import TemperatureChart from './LeftComponets/TemperatureChart.vue'
</script>

<style lang="scss" scoped>
.left-panel {
  width: 25%;
  height: 95%;

  .panel-box {
    height: 100%;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 8px;

    :deep(.dv-border-box-13) {
      height: 32%;
      padding: 8px;
      box-sizing: border-box;

      &.monitor-section {
        height: 36%;
      }
    }
  }
}
</style> 